<template>
  <div id="user-manage">
    <div style="" class="top-search">
      <van-search v-model="search" style="top: 40px;"
                  placeholder="请输入姓名或手机号" @search="onSearch" />

      <div style="margin-bottom: 10px;">
        <div style="float: left">
          <van-radio-group v-model="forbiddenRadio" direction="horizontal" style="margin-left: 10px;">
            <van-radio :name="-1">全部</van-radio>
            <van-radio :name="0">启用</van-radio>
            <van-radio :name="1">禁用</van-radio>
          </van-radio-group>
        </div>

        <van-button class="btn-theme" @click="add"
                    style="float:right;margin-right: 16px;" size="mini">新增</van-button>
        <div style="clear: both"></div>
      </div>

    </div>
    <div style="height: 95px"/>

    <van-cell :title="item.name"  v-for="item in searchList">
      <template #label>
        <div class="mobile-show">
          <span>手机号:{{item.mobile}}</span>
          <a :href="'tel:' + item.mobile">拨打</a>
        </div>
        <div>
          <span>
           账号状态:
          </span>
          <span :class="item['isForbidden'] === 0 ? 'normal-color' : 'err-color'">
           {{item['isForbidden'] === 0 ? '启用' : '禁用'}}
          </span>
        </div>
      </template>

      <template #default>
        <van-button @click="edit(item)" class="btn-theme edit-btn" size="mini">编辑</van-button>
      </template>
    </van-cell>

    <user-edit :userinfo="editUserinfo" />
    <div style="height: 40px;" />
  </div>
</template>

<script>
import axios from "@/utils/axios";
import UserEdit from "@/components/UserEdit";


export default {
  name: "UserManage",
  components: {
    UserEdit
  },
  data() {
    return {
      editUserinfo: {},
      forbiddenRadio: 0,
      search: '',
      list: [],
      popShow: true
    }
  },
  created() {

  },
  mounted() {
    axios.get("/user-list").then(res => {
      if (res['success']) this.list = res.data;
    })
  },
  methods: {
    add() {
      this.editUserinfo = {}
      this.$store.state.user.userEditPop = true;
    },
    edit(item) {
      this.editUserinfo = JSON.parse(JSON.stringify(item));
      this.$store.state.user.userEditPop = true;
    },
    onSearch() {

    }
  },
  computed: {
    searchList() {
      return this.list.filter(info => {
        const statusMatch = this.forbiddenRadio === -1 || info['isForbidden'] === this.forbiddenRadio;
        const searchMatch = !this.search ||
            (info.mobile?.toString().toLowerCase().includes(this.search.toLowerCase()) ||
            info.name?.toLowerCase().includes(this.search.toLowerCase()));

        return statusMatch && searchMatch;
      });
    }
  }
}
</script>

<style lang="scss">
#user-manage {
  .van-radio-group {
    font-size: 14px;
    .van-radio__icon {
      font-size: 14px;
    }
  }

  .van-dialog {
    width: 50%;
  }

  .mobile-show {
    a {
      margin-left: 10px;
      font-size: 12px;
      color: #ee0a24;
      float: right;
    }

    span {
      width: 120px;
    }
  }

  .btn-theme {
    background:linear-gradient(to right,#ff6034,#ee0a24);
    color: white;
    padding:0 10px;
    border-radius:5px;
  }

  .edit-btn {
    margin-top:22px;
  }

}
</style>
